<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>留言</title>
<meta name="description" content="">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="${s.base}/phone/css/common.css">
<link rel="stylesheet" href="${s.base}/phone/css/font-awesome.css">

	<link rel="stylesheet" href="${s.base}/phone/css/layui.css" />

	<style type="text/css">
		.famous-upload-pic{display:block; text-align: left; position: relative; margin-bottom: 14px;}
		.famous-upload-pic .upload-avatar{display: block; width: 105px; height: 105px; margin-top: 14px;}
		.famous-upload-pic .upload{width: 105px; height: 105px; opacity: 0; position: absolute; top: 0;}
		.famous-upload-pic .desc{font-size: 1.2rem; color: #666;}
	</style>
</head>
<body>
<div class="EditorContent" id="showContent">
	<input type="hidden" id="id" value="${id}" />
	<input type="hidden" id="personType" value="${personType}" />
	<input type="hidden" id="pageSize" value="8" />
	<input type="hidden" id="pageNum" value="1" />
	<input type="hidden" id="acceptId"  />
	<input type="hidden" id="openid"  />
	<input type="hidden" id="acceptName"  />
	<input type="hidden" id="acceptType"  />
	<input type="hidden" id="acceptHeadImage"  />
	<input type="hidden" id="onlineId"  />
	<div class="msg-con" id="LAY_demo1">

	</div>
	<div class="dynamics-group">
		<input type="button" class="Editor-button" onclick="showContent('addContent')" value="发布" />
	</div>
</div>


<!--发生内容添加开始-->
<div class="EditorContent" style="display: none;" id="addContent">
	<div class="choose" onclick="showContent('selectObject')">选择对象:<span id="showObject"></span><i class="fa fa-angle-right"></i></div>
	<div class="Editor">
		<textarea rows="5" id="content" placeholder="请输入你需要发送的内容"></textarea>
		<div class="add-img">
			<div id="showPic" class="img-con"></div>
			<span><input type="file" style="opacity:0;" capture="camera" accept="image/*"  name="myfiles" class="upload" id="myFile" onchange="ajaxFileUploads()"></span>
		</div>
	</div>
	<div class="dynamics-group">
		<input type="button" class="Editor-button"  id="saveBtn" value="确定" />
	</div>
</div>
<!--发生内容回复添加开始-->
<div class="EditorContent" style="display: none;" id="addHuiFuContent">
	<div class="Editor">
		<textarea rows="5" id="huiFuContent" placeholder="请输入你需要发送的内容"></textarea>

	</div>
	<div class="dynamics-group">
		<input type="button" class="Editor-button"  id="saveHuiFuBtn" value="确定" />
	</div>
</div>

<!--人员选中-->
<div class="EditorContent" style="display: none;" id="selectObject">
	<div class="chooseSeach">
		<div class="seach">
			<input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" />
			<i class="fa fa-search"></i>
		</div>
	</div>
	<div class="Seach-content">
		<ul>
			<li> <a class="active" href="#">学生</a>
				<#list msgStudentTreeList as msgStudentTree>
				<ul style="display:none;">
					<li><a href="#" class="active">${msgStudentTree.name}</span></a>
						<ul class="userContent" style="display: none;">
							<#list msgStudentTree.objectList as msgStudent>
							<li class="selectObject" data-value="${msgStudent.studentId}" data-name="${msgStudent.studentName}" data-openid="${msgStudent.openid}" data-headImage="${msgStudent.headImgUrl}" data-type="1"><a href="#">${msgStudent.studentName}</a></li>
							</#list>
						</ul>
					</li>
				</ul>
				</#list>
			</li>
			<li><a class="active" href="#">老师</a>
				<#list msgTeacherTreeList as msgTeacherTree>
					<ul style="display:none;">
						<li><a href="#" class="active">${msgTeacherTree.name}</span></a>
							<ul class="userContent" style="display: none;">
								<#list msgTeacherTree.objectList as msgTeacher>
									<li class="selectObject" data-value="${msgTeacher.teacherId}" data-name="${msgTeacher.teacherName}" data-type="2" data-openid="${msgTeacher.openid}" data-headImage="${msgTeacher.headImgUrl}"><a href="#">${msgTeacher.teacherName}<#if msgTeacher.type == '1'>（班主任）</#if><#if msgTeacher.type == '2'>（${msgTeacher.courseName}老师）</#if></a></li>
								</#list>
							</ul>
						</li>
					</ul>
				</#list>
			</li>
		</ul>
	</div>
</div>


<script src="${s.base}/js/jquery-3.2.0.min.js"></script>
<!---->
<script  type="application/javascript" src="${s.base}/js/layer/layer.js" ></script>
<script  type="application/javascript" src="${s.base}/js/layer/commont.js" ></script>
<script src="${s.base}/phone/js/lay/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="${s.base}/js/ajaxfileupload.js"></script>
<script type="text/javascript">
            function showContent(id) {
                $(".EditorContent").hide();
                $("#"+id).show();
            }
            function showHuiFuContent(onlineId) {
                $("#onlineId").val(onlineId)
                showContent("addHuiFuContent");
            }
            layui.use('flow', function(){
                var flow = layui.flow;
                flow.load({
                    elem: '#LAY_demo1' //流加载容器
                    ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
                    ,done: function(page, next){ //执行下一页的回调

                        var lis = [];
                        var url="${s.base}/mobile/acceptOnlineMessage";
                        var params = {
                            personType: $("#personType").val(),
                            id: $("#id").val(),
                            pageSize: $("#pageSize").val(),
                            pageNum: page
                        };
                        $.ajax({
                            url : url,
                            type : 'POST',
                            dataType : 'json',
                            data:params,
                            //contentType : 'application/json',
                            success : function(data, status, xhr) {
                                if(data.returnInfo.state==1){
                                    var pageNum=data.returnInfo.result.pageNum;
                                    var pageSize=data.returnInfo.result.pageSize;
                                    var isLastPage=data.returnInfo.result.isLastPage;
                                    var list=data.returnInfo.result.list;
                                    //模拟插入
                                    setTimeout(function(){
                                        var lis = [];
                                        if(list!=null && list.length >0){
                                            for(var i=0;i<list.length;i++){
                                                var obj=list[i];
                                                var replyC="";
                                                //alert(obj.acceptId+";"+$("#id").val());
                                                if(obj.acceptId==$("#id").val() && (obj.acceptReview==null|| obj.acceptReview == "")){
                                                    replyC='<span onclick="showHuiFuContent(\''+obj.onlineId+'\')">回复</span>';
												}
                                                var c='<div class="msg-list">'+
                                                    '<div class="msg-img">'+
                                                    '<img src="'+obj.creatorHeadImage+'" />'+
                                                    '</div>'+
                                                    '<div class="msg-right">'+
                                                    '<div class="msg-head">'+
                                                    '<h3>'+obj.creatorName+'</h3>'+
                                                    '<time>'+new Date(obj.createTime).toLocaleDateString()+replyC+'</time>'+
                                                    '</div>'+
                                                    '<p class="msg-p">'+obj.content+'</p>';
													if(obj.acceptReview!=null && obj.acceptReview != ""){
														c=c+ '<div class="interact">'+
                                                            '<p><a href="javascript:void(0)">'+obj.acceptName+'回复：</a>'+obj.acceptReview+'</p>'+
                                                            '</div>';
                                                	}
                                                  c=c+'</div>'+
                                                    '</div>';
                                                lis.push(c);
                                            }
                                        }
                                        next(lis.join(''), !isLastPage); //假设总页数为 6
                                    }, 500);

                                }else {
                                    offset("auto",data.returnEntity.errorMsg,"提示","确定");
                                }
                            },
                            Error : function(xhr, error, exception) {
                                offset("auto",exception.toString(),"提示","确定");
                            }
                        });
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page<10);

				}
			  });
			});


			//人员选择
			$(document).ready(function (){
                    $(".Seach-content ul .selectObject").bind("click",function(){
                        $("#showObject").html($(this).attr("data-name"));
                        $("#acceptId").val($(this).attr("data-value"));

                        $("#openid").val($(this).attr("data-openid"));
                        $("#acceptName").val($(this).attr("data-name"));
                        $("#acceptType").val($(this).attr("data-type"));
                        $("#acceptHeadImage").val($(this).attr("data-headImage"));
                        showContent('addContent');
                    });
					$(".Seach-content ul li a").bind("click",function(){
						var object=$(this).parent().children("ul");
						if(object.length>0){
							//存在下级的
							if($(this).attr("class").indexOf("inactive")!=-1){
								//收缩
								$(this).attr("class","active");
								$(object).hide();
							}else{
								//展开
								$(this).attr("class","inactive");
								$(object).show();
							}
						}
					});
            });
            //图片上传
            function ajaxFileUploads(){
                //开始上传文件时显示一个图片,文件上传完成将图片隐藏
                //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
                //执行上传文件操作的函数
                $.ajaxFileUpload({
                    //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
                    url:'/file/fileUploadCompress?uname=123',
                    secureuri:false,                           //是否启用安全提交,默认为false
                    fileElementId:'myFile',               //文件选择框的id属性
                    dataType:'text',                           //服务器返回的格式,可以是json或xml等
                    success:function(data, status){            //服务器响应成功时的处理函数
                        data = data.replace(/<pre.*?>/g, '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre style="....">text</pre>前后缀
                        data = data.replace(/<PRE.*?>/g, '');
                        data = data.replace("<PRE>", '');
                        data = data.replace("</PRE>", '');
                        data = data.replace("<pre>", '');
                        data = data.replace("</pre>", '');     //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
                        if(data.substring(0, 1) == 0){         //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
                            $("#showPic").append("<img src=\""+data.substring(2)+"\" />");
                        }else{
                            $('#result').html('图片上传失败，请重试！！');
                        }
                    },
                    error:function(data, status, e){ //服务器响应失败时的处理函数
                        $('#result').html('图片上传失败，请重试！！');
                    }
                });
            }
            $("#saveBtn").bind("click",function(){
                var acceptId=$("#acceptId").val();
                var openid=$("#openid").val();
                var acceptName=$("#acceptName").val();
                var acceptType=$("#acceptType").val();
                var acceptHeadImage=$("#acceptHeadImage").val();
                var content=$("#content").val();
                var personType=$("#personType").val();
                var id=$("#id").val();
                var personType=$("#personType").val();
                var pictures="";
                if(acceptName == "" || acceptName==null){
                    offset("auto","请选择对象！","温馨提示","确定");
                    return false;
                }
                if(content == "" || content==null){
                    offset("auto","请输入留言内容！","温馨提示","确定");
                    return false;
                }
                $("#showPic img").each(function (index,obj) {
                    if(pictures==null || pictures==""){
                        pictures=$(obj).attr("src");
                    }else{
                        pictures=pictures+"&"+$(obj).attr("src");
                    }
                })
                var url="${s.base}/mobile/onlineMessageAdd";
                var params = {
                    acceptId: acceptId,
                    openid: personType,
                    id: id,
                    acceptName: acceptName,
                    acceptType: acceptType,
                    acceptHeadImage: acceptHeadImage,
                    content: content,
                    pictures: pictures,
                    personType: personType
                };
                //调用了jquery.json 库
				/* var encoded = $.toJSON( request );
				 var jsonStr = encoded;*/
                $.ajax({
                    url : url,
                    type : 'POST',
                    data : params,
                    dataType : 'json',
                    //contentType : 'application/json',
                    success : function(data, status, xhr) {
                        if(1==data.returnInfo.state){
                            layer.open({
                                type: 1
                                ,title: "温馨提示"
                                ,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                ,id: 'LAY_demoauto' //防止重复弹出
                                ,content: '<div style="padding: 20px 100px;">提交成功</div>'
                                ,btn: "确定"
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,yes: function(){
                                    location.href="/mobile/onlineMessage?&personType="+personType+"&id="+id;
                                }
                            });

                        }else{
                            offset("auto",data.returnInfo.errorMsg,"温馨提示","确定");
                        }

                    },
                    Error : function(xhr, error, exception) {
                        // handle the error.
                        offset("auto",exception.toString(),"温馨提示","确定");
                    }
                });
            });
            $("#saveHuiFuBtn").bind("click",function(){
                var huiFuContent=$("#huiFuContent").val();
                var onlineId=$("#onlineId").val();
                if(huiFuContent == "" || huiFuContent==null){
                    offset("auto","请输入回复内容","温馨提示","确定");
                    return false;
                }

                var url="${s.base}/mobile/onlineMessageReplyAdd";
                var params = {
                    onlineId: onlineId,
                    content: huiFuContent
                };
                //调用了jquery.json 库
				/* var encoded = $.toJSON( request );
				 var jsonStr = encoded;*/
                $.ajax({
                    url : url,
                    type : 'POST',
                    data : params,
                    dataType : 'json',
                    //contentType : 'application/json',
                    success : function(data, status, xhr) {
                        if(1==data.returnInfo.state){
                            layer.open({
                                type: 1
                                ,title: "温馨提示"
                                ,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                ,id: 'LAY_demoauto' //防止重复弹出
                                ,content: '<div style="padding: 20px 100px;">回复成功</div>'
                                ,btn: "确定"
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,yes: function(){
                                    location.href="/mobile/onlineMessage?&personType="+$("#personType").val()+"&id="+$("#id").val();
                                }
                            });

                        }else{
                            offset("auto",data.returnInfo.errorMsg,"温馨提示","确定");
                        }

                    },
                    Error : function(xhr, error, exception) {
                        // handle the error.
                        offset("auto",exception.toString(),"温馨提示","确定");
                    }
                });
            });


</script>
</body>
</html>
